<template>
<div>
  <div class="nav">
    <span v-for="(item,index) in navArr" :key="item" :class="index==n?'active':''" @click="n=index">{{item}}</span>

  </div>
   <!-- 展示列表 -->
   <show-list v-if="arr.length!=0" :arr="arr[n].content"></show-list>
  </div>
</template>

<script>
import { reqhomegoods } from "../../../http/http";
export default {
  data() {
    return {
      // 初始化数据
      // 导航数据
      navArr: ["热门推荐", "伤心推荐", "所有商品"],
      // 选中的下标
      n:0,
      // 请求回来的数据
      arr:[]
    };
  },
  mounted() {
    // 进来就请求
    reqhomegoods().then(res=>{
      this.arr=res.data.list
    })
  },
};
</script>

<style scoped lang="less">
@import "../../../less/index.less";
.nav {
  display: flex;
 
}
span {
  flex: 1;
  text-align: center;
  line-height: 60px;
  color: @primary;
  font-size: @font-h2;
   transition: all .5s;
}
.active {
  background: @primary;
  color: @white;
}
</style>
